<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>
      <Button @click="click2">添加</Button>
    </h2>
    <h2 class="fz-20">
      Essential Links
      </h2>
    <div class="tip fz-30">
      this is tip
      </div>
    <div style="margin-left:300px;margin-top:30px;">
      <Button @click="click" type="error">删除</Button>
    </div>
    <Button type="info" @click="click">Info</Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>
    <Input v-model="value" placeholder="Enter something..." style="width: 300px" />

  </div>
</template>

<script>
// import Button from './Button.vue'

export default {
  name: 'HelloWorld',
  components: {
    // Button
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      value: ''
    }
  },
  methods: {
    click (e) {
      console.log('1', this.value)
    },
    click2 (e) {
      console.log('2')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  lang="scss">
$width: 400px;
$height: 200px;

@mixin rounded-corners($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
.hello {
  h1 {
    color: red;
    h2 {
      color: blue;
      &:hover {
        color: green;
      }
    }
  }
  h2 {
    color: #ffff00;
  }
  .tip {
    color: #ff8080;
    font: {
      size: 60px;
      weight: bold;
      style: italic;
    }
    background: pink;
    width: $width;
    height: $height;
  }
}
</style>
